<template>
  <div class="hookitem" style="padding: 30px">
    <a-card :title="name" style="border-radius: 10px">
      <a-row>
        <a-col :span="12">
          <a-statistic title="触发次数" :value="tiggerNumer" style="margin-right: 50px" />
        </a-col>
        <a-col :span="12">
          <a-statistic title="访问秘钥" :value="accessToken" :value-style="{
            'font-size':'10px',
            'word-wrap': 'break-word'
          }"/>
        </a-col>
        <a-col :span="12">
          <a-statistic title="上次触发" class="trigger-time" :value="lastTriggerTime" :value-style="{
            'font-size':'10px'
          }" />
        </a-col>
        <a-col :span="12">
          <a-statistic title="触发日志" class="trigger-time" :value="' '" :value-style="{
            'font-size':'10px'
          }" />
          <a-badge count="25" />
<!--          <a-badge-->
<!--            count="4"-->
<!--            :number-style="{-->
<!--      backgroundColor: '#fff',-->
<!--      color: '#999',-->
<!--      boxShadow: '0 0 0 1px #d9d9d9 inset',-->
<!--    }"-->
<!--          />-->
<!--          <a-badge count="109" :number-style="{ backgroundColor: '#52c41a' }" />-->
        </a-col>
        <a-col :span="12">
          <a-statistic title="构建镜像" class="trigger-time" :value="dockerImage" :value-style="{
            'font-size':'10px'
          }" />
        </a-col>
        <a-col :span="12">
          <a-statistic title="构建ci" class="trigger-time" :value="' '" :value-style="{
            'font-size':'10px'
          }" />
          <a-button type="primary" shape="round" :size="'small'" @click="onEdit(id)">
            <a-icon type="eye" />
          </a-button>
          <a-button type="danger" shape="round" :size="'small'" @click="onTrigger(name,accessToken)">
           触发
          </a-button>
        </a-col>
      </a-row>
    </a-card>
  </div>
</template>

<script>
import { Card } from 'ant-design-vue';
import { Row } from 'ant-design-vue';
import { Col } from 'ant-design-vue';
import { Statistic } from 'ant-design-vue';
import { Badge } from 'ant-design-vue';
import { Button } from 'ant-design-vue';
import { message } from 'ant-design-vue';
import { Icon } from 'ant-design-vue';
import axios from "_axios@0.21.4@axios";
import qs from "_qs@6.10.3@qs";
export default {
  components:{
    'a-card':Card,
    'a-row':Row,
    'a-col':Col,
    'a-statistic':Statistic,
    'a-badge':Badge,
    'a-button':Button,
    'a-icon':Icon
  },
  name: "hookItem",
  data(){
    return {

    }
  },
  props:{
    id:{
      type:Number,
      default:0
    },
    name:{
      type:String,
      default:"webhook"
    },
    tiggerNumer:{
      type:Number,
      default:0
    },
    accessToken:{
      type:String,
      default:''
    },
    lastTriggerTime:{
      type:String,
      default:'1997-01-01 00:00:00'
    },
    dockerImage:{
      type:String,
      default:"awesome"
    },
    onEdit:{
      type:Function,
      default:function (id){

      }
    }
  },
  methods:{
    onTrigger(projectName,accessToken)
    {
      let self = this;
      let url=baseUrl+"hook/Trigger";
      axios.get(url,{
        params:{project_name:projectName,access_token:accessToken}
      }).then((res)=>{
        message.info(JSON.stringify(res.data))
        self.showMessage(res.data)
      }).catch((err)=>{
        console.error(err)
      })
    },
    showMessage(message)
    {
      if(message.res){
        try {
          let content = JSON.parse(message.res.content.result);
          console.log("stderr",content.stderr)
          console.log("stdout",content.stdout)
        }
        catch (err){
          console.error(err)
        }
      }
    }
  }
}
</script>

<style scoped>
.hookitem{
  position: relative;
  width: 400px;
  height: 450px;
  border-radius: 10px;
  opacity: 0.7;
}
.trigger-time .ant-statistic-title{
  display: none;
}
.trigger-time .ant-statistic-content .ant-statistic-content-value{
  display: none;
}
</style>
